/**
 * 阴影遮罩组件。仅支持受控模式（调用方手动触发）
 */

import { ReactNode, useState } from "react"
import style from './index.less'
import { Button, Space } from "antd"
import { CloseOutlined, SaveOutlined } from "@ant-design/icons"
import { downloadImage } from "@/utils/app_utils"

interface MaskDialogProp {
  show: boolean,  // 是否显示
  fullScreen?: boolean, // 是否全屏显示
  content: ReactNode | React.FC<any> | null, // 显示内容
  onClose: Function,
  onOpen?: Function,
  onSave?: Function
}

type MaskDialogProps = MaskDialogProp & React.ComponentProps<'div'>

export default function MaskDialog(props: MaskDialogProps) {

  const getContentNode = () => {
    if (props.content) {
      return props.content
    }
    return props.children
  }

  const handleSave = (e: Event) => {
    e.stopPropagation()
    if (props.onSave) {
      props.onSave()
    } else {
      downloadImage(props.content?.props?.src)
    }
  }

  return <>
    {
      props.show && 
      <div className={style.mask_container}>
        <div className={style.mask} onClick={() => {
          props.onClose && props.onClose()
        }}>
          {getContentNode()}
          <div className={style.btn_groups}>
            <Space size={10}>
              <Button icon={<SaveOutlined/>} onClick={handleSave}></Button>
            </Space>
          </div>
        </div>
        
      </div>
    }
    
  </>
}